<template>
  <div :style="{width:`${wWidth}px`,height:`${wHeight}px`,}">
    <el-container :height="wHeight">
      <el-header :style="{height:`${wHeight*0.1203}px`}">
        <!-- 顶部信息 -->
        <div
          class="t-head"
          :style="{height:`${wHeight*0.1203}px`}"
        >
          <div style="display:flex;justify-content: flex-end;align-items: center;">
            <img
              :style="{width:`${wWidth*0.5119}px`}"
              src="@/assets/images/logo2.png"
            >
          </div>
          <div
            style="display:flex;justify-content: flex-end;align-items: center;color:#1a1a1a;"
            :style="{fontSize:wWidth*0.0197+'px'}"
          >
            <span
              class="font-over-hidden"
              style="font-weight:600;letter-spacing: 0.44px;"
            >{{weatherData && weatherData.data?weatherData.data.forecast[0].type : ''}}{{weatherData && weatherData.data?weatherData.data.forecast[0].low.substring(2)+'~' : ''}}{{weatherData && weatherData.data?weatherData.data.forecast[0].high.substring(2) : ''}}</span>
            <span
              class="font-over-hidden"
              style="margin-left:10px;font-weight:600;letter-spacing: 0.44px;"
            >{{nowTime?$moment(nowTime).format('YYYY年MM月DD日 HH:mm') : ''}}</span>
          </div>
        </div>
      </el-header>
      <el-container :height="wHeight*0.8771+'px'">
        <el-container>
          <el-main style="padding:0;">
            <!-- 主table -->
            <div
              class="extension-main table-hide-head-padding"
              :style="{width:`${wWidth*0.8052}px`,height:`${wHeight*0.6824}px`,}"
              data-backup="{width:`${wWidth*0.8052}px`,height:`${wHeight*0.6824}px`,}"
            >
              <el-table
                v-if="totalData.scd && totalData.scd.data"
                :data="totalData.scd.data"
                style="width: 100%;overflow:hidden;"
                stripe
                :row-class-name="tableRowClassName"
                header-row-class-name="table-header-blue"
                :header-row-style="{height:'50px ',background:'#005BAC'}"
                :row-style="{height:(wHeight*0.6824-50)/totalData.scd.data.length+'px',}"
                :height="wHeight*0.6824"
                :max-height="wHeight*0.6824"
                :max-width="wWidth*0.8052"
                border
                :fit="false"
              >
                <el-table-column
                  v-for="(item, name, index) of tableConfig"
                  v-if="totalData.scd.data[0].hasOwnProperty(name)"
                  :key="index"
                  :prop="name"
                  :label="tableConfig[name].title"
                  :width="tableConfig[name].width"
                  :align="tableConfig[name].align"
                  :header-align="tableConfig[name].align"
                >
                  <!-- 表头 -->
                  <template
                    slot="header"
                    slot-scope="scope"
                  ><span :style="{fontSize:(tableConfig[name].width-6)/scope.column.label.length+'px'}">{{scope.column.label}}</span>
                  </template>
                  <!-- 表内容区 -->
                  <template slot-scope="scope">
                    <!-- 带滚动的 -->
                    <vue-seamless-scroll
                      v-if="tableConfig[name].scroll"
                      :data="[scope.row[name]]"
                      :class-option="classOption"
                      class="warp"
                    >
                      <ul class="ul-item">
                        <!-- <li
                          class="li-item"
                          v-for="(item, index) in listData"
                          :key="index"
                        >
                          {{ item.title }}
                        </li> -->
                        <li class="li-item font-over-hidden">
                          {{scope.row[name]}}
                        </li>
                      </ul>
                    </vue-seamless-scroll>
                    <!-- 不带滚动的 -->
                    <template
                      v-else
                      style="display:inline-block;width:calc(100% - 4px);"
                      :data-width="tableConfig[name].width"
                    >
                      <span
                        class="font-over-hidden"
                        :data-percent="String(scope.row[name]).length>2&&tableConfig[name].percent ? tableConfig[name].percent : String(scope.row[name]).length==2?1.2:0.5"
                        :style="{ fontSize: tableConfig[name].fontSizeAuto ? (tableConfig[name].width-6)*(String(scope.row[name]).length>2&&tableConfig[name].percent ? tableConfig[name].percent : String(scope.row[name]).length<2?0.5:1)/(scope.row[name]+'').length+'px' : (tableConfig[name].fontSize || 12) + 'px'}"
                      >{{ scope.row[name]}}</span>
                    </template>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-main>
          <el-footer
            :height="wHeight*0.1925+'px'"
            :style="{marginTop:wHeight*0.0026+'px',padding:'0',paddingRight:wHeight*0.0036+'px'}"
          >
            <div class="bottom-emp">
              <div :style="{width:wWidth*0.163+'px'}">
                <el-table
                  style="width:100%;overflow:hidden;"
                  :data="totalData.staffArr"
                  :row-class-name="tableRowClassNameBlue"
                  :row-style="{height:(wHeight*0.1925)/4+'px',}"
                  :height="wHeight*0.1925"
                  :max-height="wHeight*0.1925"
                  :show-header="false"
                  border
                  :fit="false"
                >
                  <el-table-column
                    key="1"
                    prop="1"
                    :width="wWidth*0.163+'px'"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{scope.row.value}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div :style="{width:wWidth*0.639583+'px'}">
                <el-table
                  style="width:100%;overflow:hidden;"
                  :data="totalData.staffArr2"
                  :row-class-name="tableRowClassNameBlue2"
                  :row-style="{height:(wHeight*0.1925)/4+'px',}"
                  :height="wHeight*0.1925"
                  :max-height="wHeight*0.1925"
                  :show-header="false"
                  border
                  :fit="false"
                >
                  <el-table-column
                    key="1"
                    prop="1"
                    :width="wWidth*0.639583/3+'px'"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{scope.row.value1.name || scope.row.value1}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    key="2"
                    prop="2"
                    :width="wWidth*0.639583/3+'px'"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{scope.row.value2.name || scope.row.value2}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    key="3"
                    prop="3"
                    :width="wWidth*0.639583/3+'px'"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{scope.row.value3.name || scope.row.value3}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-footer>
        </el-container>
        <el-aside :width="wWidth*0.1921+'px'">
          <div
            :style="{width:'100%'}"
            v-if="totalData.tank && totalData.tank.data"
            class="table-hide-head-padding multi-level-header-black"
          >
            <el-table
              style="width:100%;overflow:hidden;"
              :data="totalData.tank.data"
              :row-class-name="tableRowClassName"
              :header-row-class-name="tableHeaderClassNameBlackBlue"
              :header-row-style="{height:'50px ',background:'#005BAC'}"
              :row-style="{height:(wHeight*0.5842-100)/totalData.tank.data.length+'px',}"
              :height="wHeight*0.5842"
              :max-height="wHeight*0.5842"
              border
              :fit="false"
            >
              <el-table-column
                key="0"
                prop="0"
                :width="wWidth*0.1921+'px'"
                align="center"
              >
                <template
                  slot="header"
                  slot-scope="scope"
                >
                  <span :style="{fontSize:(wWidth*0.1921/3-6)/4+'px'}">{{'储料缸状态'}}</span>
                </template>
                <el-table-column
                  key="1"
                  prop="1"
                  :width="wWidth*0.1921/3+'px'"
                  align="center"
                >
                  <template
                    slot="header"
                    slot-scope="scope"
                  >
                    <span :style="{fontSize:(wWidth*0.1921/3-6)/4+'px'}">{{'料缸名称'}}</span>
                  </template>
                  <template slot-scope="scope">
                    <span :style="{fontSize:(wWidth*0.1921/3-6)/String(scope.row.tank_name).length+'px'}">{{scope.row.tank_name}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  key="2"
                  prop="2"
                  :width="wWidth*0.1921/3+'px'"
                  align="center"
                >
                  <template
                    slot="header"
                    slot-scope="scope"
                  >
                    <span :style="{fontSize:(wWidth*0.1921/3-6)/4+'px'}">{{'物料名称'}}</span>
                  </template>
                  <template slot-scope="scope">
                    <vue-seamless-scroll
                      :data="[scope.row.material_tank_name]"
                      :class-option="classOption"
                      class="warp"
                    >
                      <ul class="ul-item">
                        <li
                          class="li-item font-over-hidden"
                          style="font-size:16px;"
                        >
                          {{scope.row.material_tank_name}}
                        </li>
                      </ul>
                    </vue-seamless-scroll>
                  </template>
                </el-table-column>
                <el-table-column
                  key="3"
                  prop="3"
                  :width="wWidth*0.1921/3+'px'"
                  align="center"
                >
                  <template
                    slot="header"
                    slot-scope="scope"
                  >
                    <span :style="{fontSize:(wWidth*0.1921/3-6)/4+'px'}">{{'状态'}}</span>
                  </template>
                  <template slot-scope="scope">
                    <span :style="{fontSize:(wWidth*0.1921/3-6)/String(scope.row.tank_status).length+'px',color:scope.row.tank_status=='空闲'?'#FF963F':''}">{{scope.row.tank_status}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div
            :style="{width:'100%',marginTop:wHeight*0.0046+'px'}"
            v-if="totalData.device && totalData.device.data"
            class="table-hide-head-padding multi-level-header-black"
          >
            <el-table
              style="width:100%;overflow:hidden;"
              :data="totalData.device.data"
              :row-class-name="tableRowClassName"
              :header-row-class-name="tableHeaderClassNameBlackBlue"
              :header-row-style="{height:'50px ',background:'#005BAC'}"
              :row-style="{height:(wHeight*0.2907-100)/totalData.device.data.length+'px',}"
              :height="wHeight*0.2907"
              :max-height="wHeight*0.2907"
              border
              :fit="false"
            >
              <el-table-column
                key="0"
                prop="0"
                :width="wWidth*0.1921+'px'"
                align="center"
              >
                <template
                  slot="header"
                  slot-scope="scope"
                >
                  <span :style="{fontSize:(wWidth*0.1921/2-6)/4+'px'}">{{'设备状况'}}</span>
                </template>
                <el-table-column
                  key="1"
                  prop="1"
                  :width="wWidth*0.1921/2+'px'"
                  align="center"
                >
                  <template
                    slot="header"
                    slot-scope="scope"
                  >
                    <span :style="{fontSize:(wWidth*0.1921/2-6)/4+'px'}">{{'设备名称'}}</span>
                  </template>
                  <template slot-scope="scope">
                    <vue-seamless-scroll
                      :data="[scope.row.device_name]"
                      :class-option="classOption"
                      class="warp"
                    >
                      <ul class="ul-item">
                        <li
                          class="li-item font-over-hidden"
                          style="font-size:16px;"
                        >
                          {{scope.row.device_name}}
                        </li>
                      </ul>
                    </vue-seamless-scroll>
                  </template>
                </el-table-column>
                <el-table-column
                  key="2"
                  prop="2"
                  :width="wWidth*0.1921/2+'px'"
                  align="center"
                >
                  <template
                    slot="header"
                    slot-scope="scope"
                  >
                    <span :style="{fontSize:(wWidth*0.1921/2-6)/4+'px'}">{{'运转状态'}}</span>
                  </template>
                  <template slot-scope="scope">
                    <span :style="{fontSize:(wWidth*0.1921/2-6)/4+'px'}">{{scope.row.device_running_status}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Vue from "vue";
import vueSeamlessScroll from "vue-seamless-scroll";

import { netWork } from "@/assets/js/docData";
export default {
  name: "prodctTable",
  components: {
    vueSeamlessScroll,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      totalData: {},
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
      ],
      classOption: {
        limitMoveNum: 1,
        direction: 2, //方向: 0 往下 1 往上 2 向左 3 向右。
      },
      wWidth: window.innerWidth,
      wHeight: window.innerHeight,
      tableConfig: {},
      weatherData: {},
      nowTime: 0,
      updateTime: {
        table: new Date().getTime(),
        weather: new Date().getTime(),
      },
      current: 1,
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      //console.log(row, rowIndex); //检修：#ff4a4a,偶数：#eff7ff
      if (
        row.running_status === "检修" ||
        row.device_running_status === "检修" ||
        row.device_status === "检修" ||
        row.tank_status === "检修"
      ) {
        return "error-row";
      } else if (
        row.running_status === "待修" ||
        row.device_running_status === "待修" ||
        row.device_status === "待修" ||
        row.tank_status === "待修"
      ) {
        return "warning-row";
      }
      return "";
    },
    tableRowClassNameBlue({ row, rowIndex }) {
      //console.log(row, rowIndex); //检修：#ff4a4a,偶数：#eff7ff
      if (rowIndex % 2 == 0) {
        return "blue-row";
      }
      return "";
    },
    tableRowClassNameBlue2({ row, rowIndex }) {
      //console.log(row, rowIndex); //检修：#ff4a4a,偶数：#eff7ff
      if (rowIndex == 0) {
        return "blue-row";
      }
      return "hide-bottom-border";
    },
    tableHeaderClassNameBlackBlue({ row, rowIndex }) {
      //console.log(row, rowIndex); //检修：#ff4a4a,偶数：#eff7ff
      if (rowIndex == 0) {
        return "table-header-black";
      }
      return "table-header-blue";
    },
    getTableData() {
      let that = this;
      let tempTime = {
        table: new Date().getTime(),
        weather: that.updateTime.weather,
      };
      that.$set(that, "updateTime", tempTime);
      netWork({
        apiUrl: that.apiUrl + "/third/pb/getPb",
        vueObj: that,
        postData: { type: 1, current: that.current },
        callback: (res) => {
          //console.log(res);
          let tempEmp = res.data.staff[0];
          let tempData = JSON.parse(JSON.stringify(that.totalData));
          res.data.scd.data.forEach((val) => {
            val.product_duration = val.product_duration
              ? that.dateFormat(val.product_duration * 1000)
              : val.product_duration;
          });
          res.data.staffArr = [
            { title: "row1", value: "定编人数" },
            { title: "row2", value: tempEmp.establishment },
            { title: "row3", value: "出勤人数" },
            { title: "row4", value: tempEmp.attendance },
          ];
          res.data.staffArr2 = [
            { value1: "负责人", value2: "质检员", value3: "工程师" },
            {
              value1: "姓名：" + tempEmp.principal.split(",")[0],
              value2: "姓名：" + tempEmp.quality_inspector.split(",")[0],
              value3: "姓名：" + tempEmp.engineer.split(",")[0],
            },
            {
              value1: "工号：" + tempEmp.principal.split(",")[1],
              value2: "工号：" + tempEmp.quality_inspector.split(",")[1],
              value3: "工号：" + tempEmp.engineer.split(",")[1],
            },
            {
              value1: "电话：" + tempEmp.principal.split(",")[2],
              value2: "电话：" + tempEmp.quality_inspector.split(",")[2],
              value3: "电话：" + tempEmp.engineer.split(",")[2],
            },
          ];
          that.current =
            res.data.tank.data.length == 0 &&
            res.data.scd.data.length == 0 &&
            res.data.device.data.length == 0
              ? 1
              : that.current + 1;
          res.data.device =
            res.data.device.data.length == 0
              ? tempData.device
              : res.data.device;
          res.data.scd =
            res.data.scd.data.length == 0 ? tempData.scd : res.data.scd;
          res.data.tank =
            res.data.tank.data.length == 0 ? tempData.tank : res.data.tank;
          res.data.staff =
            res.data.staff.length == 0 ? tempData.staff : res.data.staff;
          that.totalData = res.data;
        },
      });
    },
    getWeather() {
      //周一找合青讨论下翻页，各区域页面不同的问题，看看能不能固定写死每页的数量，有数据就一直往下翻，返回来的数据如果长度是0，那该区域用旧数据，页码一直往上加如果三个区域全为零页码改为1，还是后端如果没数据直接3个全返回1，前端直接用返回的页码重置前端页码
      let that = this;
      let tempTime = {
        table: that.updateTime.table,
        weather: new Date().getTime(),
      };
      that.$set(that, "updateTime", tempTime);
      netWork({
        apiUrl:
          that.apiUrl + "/third/pb/getPbWeather?city_code=101020900&api=1",
        vueObj: that,
        mod: "get",
        callback: (res) => {
          that.weatherData = res.data;
        },
      });
    },
    dateFormat(time) {
      let resDate =
        new Date(time).getMonth() < 9
          ? "0" + String(new Date(time).getMonth() + 1)
          : new Date(time).getMonth() + 1;

      resDate +=
        "-" +
        (new Date(time).getDate() < 10
          ? "0" + String(new Date(time).getDate())
          : new Date(time).getDate());

      resDate +=
        " " +
        (new Date(time).getHours() < 10
          ? "0" + String(new Date(time).getHours())
          : new Date(time).getHours());

      resDate +=
        ":" +
        (new Date(time).getMinutes() < 10
          ? "0" + String(new Date(time).getMinutes())
          : new Date(time).getMinutes());

      return resDate;
    },
  },
  mounted() {
    let that = this;
    that.tableConfig = {
      product_name: {
        width: parseInt(that.wWidth * 0.8052 * 0.1293),
        scroll: true,
        fontSize: 14,
        align: "center",
        title: "生产产品",
        fontSizeAuto: true,
      },
      product_batch_number: {
        width: parseInt(that.wWidth * 0.8052 * 0.1099),
        scroll: false,
        fontSize: 14,
        align: "center",
        title: "生产批号",
        fontSizeAuto: true,
        percent: 1.5,
      },
      product_vat_number: {
        width: parseInt(that.wWidth * 0.8052 * 0.0582),
        scroll: false,
        fontSize: 14,
        align: "center",
        title: "打料缸号",
        fontSizeAuto: true,
      },
      product_duration: {
        width: parseInt(that.wWidth * 0.8052 * 0.0931),
        scroll: false,
        fontSize: 16,
        align: "center",
        title: "生产时间",
        fontSizeAuto: true,
        percent: 1.7,
      },
      product_status: {
        width: parseInt(that.wWidth * 0.8052 * 0.0646),
        scroll: false,
        fontSize: 14,
        align: "center",
        title: "生产状态",
      },
      product_plan: {
        width: parseInt(that.wWidth * 0.8052 * 0.1025),
        scroll: false,
        fontSize: 14,
        align: "center",
        title: "计划产量",
        fontSizeAuto: true,
        percent: 1.5,
      },
      product_actual: {
        width: parseInt(that.wWidth * 0.8052 * 0.1025),
        scroll: false,
        fontSize: 14,
        align: "center",
        title: "实际产量",
        fontSizeAuto: true,
        percent: 1.5,
      },
      product_difference: {
        width: parseInt(that.wWidth * 0.8052 * 0.0721),
        scroll: false,
        fontSize: 12,
        align: "center",
        title: "差异",
        fontSizeAuto: true,
      },
      product_operator: {
        width: parseInt(that.wWidth * 0.8052 * 0.1025),
        scroll: true,
        fontSize: 12,
        align: "center",
        title: "操作人",
      },
      product_qualification: {
        width: parseInt(that.wWidth * 0.8052 * 0.1025),
        scroll: false,
        fontSize: 14,
        align: "center",
        title: "合格数量",
        fontSizeAuto: true,
        percent: 1.5,
      },
      device_status: {
        width: parseInt(that.wWidth * 0.8052 * 0.0707),//0.0647
        scroll: false,
        fontSize: 14,
        align: "center",
        title: "设备状态",
        fontSizeAuto: true,
        percent: 1.5,
      },
    };
    that.getTableData();
    that.getWeather();
    that.nowTime = new Date().getTime();
  },
  computed: {
    apiUrl() {
      return this.$store.state.apiUrl;
    },
  },
  watch: {
    nowTime: {
      deep: true,
      immediate: true,
      handler(nval, oval) {
        let that = this;
        if (nval) {
          if (new Date().getTime() - that.updateTime.table > 30000) {
            that.getTableData();
          }
          if (new Date().getTime() - that.updateTime.weather > 7200000) {
            that.getWeather();
          }
          setTimeout(() => {
            that.nowTime = new Date().getTime();
          }, 1000);
        }
      },
    },
  },
};
</script>

<style scoped lang="less">
.extension-main {
}
.warp {
  width: 100%; //130px * 4;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    &.ul-item {
      display: flex;
      .li-item {
        margin-right: 10px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
.t-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.bottom-emp {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
